<template>
  <el-dialog title="物料信息" :visible="selectImportMaterialDialog" width="70%" class="ImportMaterial-select"
    @close="selectImportMaterialClose">
    <div class="app-container ImportMaterial-box">
      <el-row :gutter="20">
        <el-col :span="24" :xs="24">
          <el-form :inline="true" label-width="70px" class="search-top">
            <div class="search-sub">
              <el-form-item label="客户名称" v-if="ImportMaterialCode.workType==0">
                <el-input v-model="searchForm.customer" clearable size="small" style="width: 150px" />
              </el-form-item>
              <el-form-item label="加工设备" v-if="ImportMaterialCode.workType==1">
                <el-input v-model="searchForm.productionLine" clearable size="small" style="width: 150px" />
              </el-form-item>
              <el-form-item label="外协厂家" v-if="ImportMaterialCode.workType==2">
                <el-input v-model="searchForm.outsource" clearable size="small" style="width: 150px" />
              </el-form-item>
              <el-form-item label="物料编码">
                <el-input v-model="searchForm.invCode" clearable size="small" style="width: 150px" />
              </el-form-item>
              <el-form-item label="物料名称">
                <el-input v-model="searchForm.invName" clearable size="small" style="width:150px" />
              </el-form-item>
              <el-form-item>
                <el-button type="primary" icon="el-icon-search" @click="search">搜索
                </el-button>
              </el-form-item>
            </div>
            <div>
                <el-button type="primary" plain icon="el-icon-menu" size="mini" @click="checkleAll">查询最新</el-button>
            </div>
          </el-form>
          <el-row :gutter="10" class="mb8">
            <el-col :span="1.5">

            </el-col>
          </el-row>
          <!-- 客户数据 -->
          <div ref="tableData">
            <el-form :rules="rules" :model="ImportMaterialForm">
              <el-table :data="ImportMaterialForm.ImportMaterialData" border v-loading="loading" :height="maxHeight">
                <el-table-column type="index" width="60" align="center" label="序号">
                </el-table-column>
                <el-table-column label="单据编码" align="center" width="170" prop="wm_code">
                </el-table-column>
                <el-table-column v-if="ImportMaterialCode.workType==0" label="客户" align="center" prop="customer"
                  width="180">
                </el-table-column>
                <el-table-column v-if="ImportMaterialCode.workType==1" label="加工设备" align="center">
                 <template v-slot="scope">
                  <span>{{scope.row.dept_name}}</span>&nbsp;&nbsp;<span>{{scope.row.production_line}}</span>
                 </template>
                </el-table-column>
                <el-table-column v-if="ImportMaterialCode.workType==2" label="外协厂家" align="center" prop="outsource">
                </el-table-column>
                <el-table-column prop="batch_date" label="批次日期" align="center" width="160">
                  <template v-slot="scope">
                    <span>{{scope.row.batch_date|inMaterTime}}</span>
                  </template>
                </el-table-column>
                <el-table-column label="物料编码" align="center" prop="inv_code">
                </el-table-column>
                <el-table-column label="物料名称" align="center" prop="inv_name">
                </el-table-column>
                <el-table-column label="型号规格" align="center" prop="inv_attribute">
                </el-table-column>
                <el-table-column prop="f1" :label="wmSpecail[0].name" width="100"
                  v-if="wmSpecail.length>0&&wmSpecail[0].status=='0'" align="center">
                </el-table-column>
                <el-table-column prop="f2" :label="wmSpecail[1].name" width="100"
                  v-if="wmSpecail.length>1&&wmSpecail[1].status=='0'" align="center">
                </el-table-column>
                <el-table-column prop="f3" :label="wmSpecail[2].name" width="100"
                  v-if="wmSpecail.length>2&&wmSpecail[2].status=='0'" align="center">
                </el-table-column>
                <el-table-column prop="f4" :label="wmSpecail[3].name" width="100"
                  v-if="wmSpecail.length>3&&wmSpecail[3].status=='0'" align="center">
                </el-table-column>
                <el-table-column prop="f5" :label="wmSpecail[4].name" width="100"
                  v-if="wmSpecail.length>4&&wmSpecail[4].status=='0'" align="center">
                </el-table-column>
                <el-table-column label="数量" align="center" prop="quantity">
                  <template v-slot="scope">
                    <div style="text-align: right;">
                      <span>{{scope.row.quantity}}</span>
                    </div>
                  </template>
                </el-table-column>

                <el-table-column prop="amountReceived" label="退货数量" align="center" width="120">
                  <template v-slot="scope">
                    <el-form-item :class="{'is-error':scope.row.borderStatus}"
                      :prop=" 'ImportMaterialData.' + scope.$index + '.amountReceived' "
                      :rules='rules.amountReceived'>
                      <div class="collection-amount">
                        <el-input v-model="scope.row.amountReceived"
                          @change="handleReceived(scope.$index,scope.row)">
                        </el-input>
                      </div>
                    </el-form-item>
                  </template>
                </el-table-column>
              </el-table>
            </el-form>
          </div>
        </el-col>
      </el-row>
    </div>
    <div class="ImportMaterial-success" v-if="isOper">
      <div>
        <el-button :disabled="successStatus" type="primary" @click="handleImportMaterialSuccess">确定</el-button>
        <el-button @click="handleClose">取消</el-button>
      </div>
    </div>
  </el-dialog>
</template>

<script>
  import {
    ImportMaterialList
  } from "../../api/checkin";
  import {
    isSerial
  } from "@/utils/cingsoft";

  import {
    getToken
  } from "@/utils/auth";
  import print from "print-js"; //打印js
  //输入是否为数字效验
  import {
    isAccord
  } from "@/utils/cingsoft"
  export default {
    data() {
      // 领取量效验
      var checkOutReceived = (rule, value, callback) => {
        if (value == "") {
          callback();
        } else if (!isAccord(value)) {
          this.successStatus = true
          callback(new Error(''));
        } else {
          callback();
        }
      };
      return {
        // 遮罩层
        loading: false,
        // 最大高度
        maxHeight: null,
        // 是否显示操作
        isOper: false,
        //确定按钮状态
        successStatus: true,
        //单据编码
        wmCode: [],
        //参数
        queryParams: {
          workType: "",
          warehouse: "",
          customer: "", //客户名称
          invName: "",
          invCode: "",
          productionLine: "", //加工设备
          outsource: "" //外协厂家
        },
        //客户数据
        ImportMaterialForm: {
          ImportMaterialData: []
        },
        //搜索参数
        searchForm: {
          customer: "", //客户名称
          productionLine: "", //加工设备
          outsource: "", //外协厂家
          invName: "",
          invCode: "",
        },
        //已领取量
        successReceived: [],
        //合计
        rules: { //是否必须输入
          amountReceived: [{
            validator: checkOutReceived,
            trigger: 'blur'
          }],
        }
      }
    },
    props: {
      selectImportMaterialDialog: {
        type: Boolean,
        default: true
      },
      wmSpecail: {
        type: Array,
        default () {
          return []
        }
      },
      ImportMaterialCode: {
        type: Object,
        default () {
          return {}
        }
      }
    },
    created() {
      this.queryParams.workType = this.ImportMaterialCode.workType;
      this.queryParams.warehouse = this.ImportMaterialCode.warehouse;
      this.getImportMaterialList();

    },
    methods: {
      // 获取批次数据
      getImportMaterialList() {
          this.loading =  true;
        ImportMaterialList(this.queryParams).then(res => {
          if (res.code == 200) {
            const list = JSON.parse(JSON.stringify(res.data));
            list.forEach(obj => {
              obj.amountReceived = "";
              obj.borderStatus = false;
              obj.index = ""
            })
            this.ImportMaterialForm.ImportMaterialData = list;
            this.isOper = true;
            this.maxHeight = (`${document.documentElement.clientHeight}` - 400);
             this.loading =  false;
          }
        })
      },
      //搜索
      search() {
        this.queryParams.customer = this.searchForm.customer;
        this.queryParams.productionLine = this.searchForm.productionLine;
        this.queryParams.outsource = this.searchForm.outsource;
        this.queryParams.invName = this.searchForm.invName;
        this.queryParams.invCode = this.searchForm.invCode;
        this.getImportMaterialList();
      },

      // 查询所有
      checkleAll() {
        //清空搜索信息，避免干扰
        this.queryParams.customer = "";
        this.searchForm.customer = ""
        this.queryParams.productionLine = "";
        this.searchForm.productionLine = "";
        this.queryParams.outsource = "";
        this.searchForm.outsource = "";
        this.queryParams.invName = "";
        this.searchForm.invName = "";
        this.queryParams.invCode = "";
        this.searchForm.invCode = "";
        this.getImportMaterialList()
      },
      // 弹框状态
      selectImportMaterialClose() {
        this.$emit("selectImportMaterialClose");
      },

      // 领取量添加与效验
      handleReceived(index, data) {
        if ((data.amountReceived > data.quantity)) {
          data.borderStatus = true; //改变输入框状态
        } else if (isAccord(data.amountReceived) || data.amountReceived == "") {
          if (data.amountReceived !== "") {
            data.index = index;
            let number = this.wmCode.findIndex(item => {
              return item.index == index
            });
            if (number == -1) {
              this.wmCode.push(data);
            } else {
              this.wmCode.splice(number, 1, data)
            }
          } else {
            this.wmCode.forEach((value, i) => {
              if (value.index == index) {
                this.wmCode.splice(i, 1);
              }
            })
          }
          data.borderStatus = false; //改变输入框状态

        }

        // 确定按钮状态
        this.ImportMaterialForm.ImportMaterialData.find(obj=>{
            if( obj.borderStatus == true || this.wmCode.length == 0){
               return  this.successStatus = true
            }else{
               return  this.successStatus = false
            }
          })

      },

      //确定领取
      handleImportMaterialSuccess() {
        let code = this.wmCode[0].wm_code;
        let flag = this.wmCode.every(item => item.wm_code === code)
        if (flag == true) {
          this.$emit("handleImportMaterialSuccess", this.wmCode);
          this.selectImportMaterialClose()
        } else {
          this.msgError("只能退同一单据物料")
        }
      },

      // 关闭弹框
      handleClose() {
        this.selectImportMaterialClose()
      }
    },
    filters: {
      //时间格式化
      inMaterTime(date) {
        let time = new Date(date);
        return time.getFullYear() + "-" + (time.getMonth() + 1) + "-" + time.getDate() + "  " + time.getHours() + ":" +
          time.getMinutes() + ":" + time.getSeconds()
      }
    }
  };
</script>
<style lang="scss">
  .ImportMaterial-in-dialog {
    .Billing-box {
      padding: 15px;
      box-shadow: 1px 1px 10px 1px #eee;
      border-radius: 5px;
      padding-bottom: 10px;
      margin: 10px 10px 0px 10px;

      h2 {
        font-size: 15px;
        font-weight: 700;
        margin: 0;
        border-bottom: 1px solid #dfe6ec;
        padding-bottom: 15px;
        margin-bottom: 15px;
      }
    }

    .el-input.is-disabled .el-input__inner {
      color: #333;
    }
  }

  .ImportMaterial-select {
    .el-dialog__body {
      height: calc(100vh - 250px);
    }

    .total-amount {
      float: right;
      font-weight: 700;
      width: 150px;

      p {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 23px;
        line-height: 23px;
        span {
          font-size: 16px;
        }
      }
    }

    .el-input--medium .el-input__inner {
      background: none;
      border-color: #fff;
      border-radius: 0;
      padding: 0;
      padding-right: 0 !important;
      height: 31px;
      line-height: 0;
    }

    .el-form-item__content {
      line-height: 30px;
    }

    .el-form-item.is-error .el-input__inner,
    .el-form-item.is-error .el-input__inner:focus,
    .el-form-item.is-error .el-textarea__inner,
    .el-form-item.is-error .el-textarea__inner:focus {
      border-color: #ff4949;
    }

    .collection-amount {
      input {
        text-align: right;
      }
    }

    .el-table--medium th,
    .el-table--medium td {
      padding: 0 !important;
    }

    .app-container {
      padding-top: 0;
    }

    .el-table {
      cursor: pointer;
    }

  .el-button--mini{
      padding: 8px 20px!important;
    }
    .search-top{
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 10px;
      .search-sub{
        height: 32px;
      }
    }
    .ImportMaterial-box {
      .el-tag.el-tag--info {
        color: #1890FF;
      }

      .Billing-box {
        padding: 15px;
        box-shadow: 1px 1px 10px 1px #eee;
        border-radius: 5px;
        padding-bottom: 10px;
        margin: 10px 10px 0px 10px;

        h2 {
          font-size: 15px;
          font-weight: 700;
          margin: 0;
          border-bottom: 1px solid #dfe6ec;
          padding-bottom: 15px;
          margin-bottom: 15px;
        }
      }

      .el-switch {
        display: flex;
        justify-content: center;
      }

      .el-radio__input.is-disabled.is-checked .el-radio__inner {
        background-color: #F5F7FA;
        border-color: #999;
      }

      .el-radio {
        margin-right: 18px;
      }

      .el-radio__label {
        padding-left: 5px;
      }

      .el-radio:nth-of-type(3) {
        margin-right: 0;
      }

      .el-switch.is-disabled {
        opacity: 1;
      }

      .el-table .el-table__header-wrapper th,
      .el-table .el-table__fixed-header-wrapper th {
        height: 35px;
      }

      .el-table__body tr:hover>td {
        background: #fff;
      }

      .el-dialog__body {
        padding-right: 15px;
        padding-bottom: 20px;

      }

      .el-input.is-disabled .el-input__inner {
        color: #333;
      }

    }

    .close-select {
      overflow: hidden;

      i {
        float: right;
        margin-right: 15px;
        color: #909399;
        cursor: pointer;
      }
    }

    .ImportMaterial-success {
      position: absolute;
      bottom: 20px;
      right: 40px;

      button {
        padding: 8px 40px;
      }

    }
  }
</style>
